<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>关注列表</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui-pull-refresh.css" />
	<style>
	    body {}
	    .avatar {
	        width: 90px;
	        height: 90px;
	        margin-left: 1em;
	        margin-top: 1em;
	        margin-right: 1em;
	        margin-bottom: 1em;
	    }
	    .title {
	    	font-weight:bold;
	    	font-size:20px;
	    }
	    .aui-list-item-text{
	    	width: 80%;
	    	float:left;
	    	height:30px;
	    }
	    .right{
	    	width: 20%;
	    	float:right;
	    	height:60px;
	    }
	    .right img{
	    	margin-top:10px;
	    	width: 40px;
	    	height: 40px;
	    	float:right;
	    }
	    i{
	    	width:100%;
	    }
	</style>
</head>
<body>
	<section class="aui-refresh-content">
		<div class="aui-content aui-margin-b-15">
	        <ul class="aui-list aui-media-list">
	            <div id="list"></div>
	            <script id="list_template" type="text/x-dot-template">
	                {{ for(var i=0; i< it.data.length; i++) { }}
	                <li class="aui-list-item aui-list-item-middle">
		                <div class="aui-media-list-item-inner">
		                    <div class="aui-list-item-media" style="width: 3rem;">
		                        <img src="{{=it.path + it.data[i].avatar}}" class="aui-img-round aui-list-img-sm" >
		                    </div>
		                    <div class="aui-list-item-inner">
		                        <div class="aui-list-item-text">
	                        		<div class="aui-list-item-title aui-font-size-14">{{=it.data[i].name}}</div>
		                        </div>
		                        <div class="right"><img id="follow_{{=it.data[i].id}}" src="../../image/user/fan.png" class="aui-img-round aui-list-img-sm" onclick="changeFollow('{{=it.data[i].id}}')"></div>
		                           <div class="aui-list-item-text aui-font-size-6" id="fans_{{=it.data[i].id}}">
		                             课程：{{=it.data[i].course_count}}  粉丝：{{=it.data[i].fans_count}}
		                    </div>
		                </div>
		            </li>
		             {{ } }}
	    		</script>
	            
	        </ul>
	    </div>
	</section>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
	var count = 0;
	var token;
	var isbottom = false;//是否到底
    var isRefresh = true;//是否刷新
	apiready = function(){
		require(["api","zepto","common"],function(){
			$zb.prefs.getPrefs('token',function(ret){
		    	token = ret.value;
		    	sendAjax();
		    })
		    
		    api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#ccc',
                textColor: '#fff',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                api.refreshHeaderLoadDone();
                if(ret){
                    isbottom = false;
                    isRefresh=true;
                    sendAjax();
                }
            });
		    
		    api.addEventListener({
                name:'scrolltobottom',
                extra:{
                    threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
                }
            }, function(){
                isRefresh = false;
                isbottom?api.toast({
                    msg:'没有更多了'
                }):sendAjax();        
            });
		})
	};
	
	function sendAjax(){
		var data = {
			values:{
				token:token,
				appindex:count
			}
		}
		$zb.requestForData(data,'fans','listConcerns',function(ret){
			var temp = {
                data:ret.data,
                path:$zb.getRes_temp()
            }
			if(isRefresh){
                $("#list").html(doT.template($("#list_template").text())(temp));
            }else{
                $("#list").append(doT.template($("#list_template").text())(temp));
            }
            if(ret.data.length===10){
                count+=10;
            }else{
                isbottom = true;
            }
		});
	}
	
	function changeFollow(id){
		var data = {
			values:{
				token:token,
				teacher_id:id
			}
		}
		var jpush = api.require('ajpush');
		if($("#follow_"+id).attr("src") == "../../image/user/nofan.png"){
			var preContent = $("#fans_"+id).text().split('粉丝：');
			var postContent = preContent[0]+'粉丝：'+(parseInt(preContent[1])+1);
			$("#fans_"+id).text(postContent);
			
			$zb.requestForData(data,'fans','follow',function(result){
				$("#follow_"+id).attr("src","../../image/user/fan.png");
				$zb.prefs.getPrefs('userInfo',function(ret){
                    if(ret.value){
                        var param = {};
                        param.alias = JSON.parse(ret.value).push_id;
                        param.tags = result.data.tags;
                        jpush.bindAliasAndTags(param, function(ret) {
                        });
                    }
                })
			});
		}else{
			var preContent = $("#fans_"+id).text().split('粉丝：');
			var postContent = preContent[0]+'粉丝：'+(parseInt(preContent[1])-1);
			$("#fans_"+id).text(postContent);
			$zb.requestForData(data,'fans','unfollow',function(result){
				$("#follow_"+id).attr("src","../../image/user/nofan.png");
			 	$zb.prefs.getPrefs('userInfo',function(ret){
                    if(ret.value){
                        var param = {};
                        param.alias = JSON.parse(ret.value).push_id;
                        param.tags = result.data.tags;
                        jpush.bindAliasAndTags(param, function(ret) {
                        });
                    }
                })
			});
		}
		
	}
					
	
</script>
</html>